<template>
  <view class="category-container">
    <view class="header">
      <view class="search-bar">
        <uni-icons type="search" size="16" color="#999" class="search-icon"></uni-icons>
        <input type="text" placeholder="搜索商品" placeholder-style="color: #999" />
      </view>
    </view>
    
    <view class="category-content">
      <!-- 左侧分类导航 -->
      <view class="left-nav">
        <view 
          v-for="(item, index) in categories" 
          :key="index"
          class="nav-item"
          :class="{ active: currentIndex === index }"
          @tap="selectCategory(index)"
        >
          {{ item.name }}
        </view>
      </view>
      
      <!-- 右侧分类内容 -->
      <view class="right-content">
        <view class="category-banner">
          <image src="/static/images/banner2.png" mode="aspectFill"></image>
        </view>
        
        <view class="subcategories">
          <view class="subcategory-item" v-for="(item, index) in currentSubcategories" :key="index">
            <image :src="item.icon" mode="aspectFit"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentIndex: 0,
        categories: [
          { name: '蔬菜水果' },
          { name: '肉禽蛋奶' },
          { name: '海鲜水产' },
          { name: '粮油米面' },
          { name: '休闲零食' },
          { name: '酒水饮料' },
          { name: '日用品' }
        ],
        subcategories: [
          // 蔬菜水果子分类
          [
            { name: '叶菜类', icon: '/static/images/category1.png' },
            { name: '根茎类', icon: '/static/images/category1.png' },
            { name: '茄果类', icon: '/static/images/category1.png' },
            { name: '瓜类', icon: '/static/images/category1.png' },
            { name: '豆类', icon: '/static/images/category1.png' },
            { name: '菌菇类', icon: '/static/images/category1.png' },
            { name: '水果类', icon: '/static/images/category1.png' }
          ],
          // 肉禽蛋奶子分类
          [
            { name: '猪肉', icon: '/static/images/category2.png' },
            { name: '牛肉', icon: '/static/images/category2.png' },
            { name: '羊肉', icon: '/static/images/category2.png' },
            { name: '鸡肉', icon: '/static/images/category2.png' },
            { name: '鸭肉', icon: '/static/images/category2.png' },
            { name: '鸡蛋', icon: '/static/images/category2.png' },
            { name: '牛奶', icon: '/static/images/category2.png' }
          ],
          // 默认子分类
          [
            { name: '热门分类', icon: '/static/images/category3.png' },
            { name: '推荐商品', icon: '/static/images/category3.png' },
            { name: '新品上市', icon: '/static/images/category3.png' }
          ]
        ]
      }
    },
    computed: {
      currentSubcategories() {
        // 如果当前分类有对应的子分类，则返回，否则返回默认子分类
        if (this.subcategories[this.currentIndex]) {
          return this.subcategories[this.currentIndex];
        }
        return this.subcategories[2];
      }
    },
    methods: {
      selectCategory(index) {
        this.currentIndex = index;
      }
    }
  }
</script>

<style scoped>
  .category-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
  }
  
  .header {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #f2f2f2;
    border-radius: 20px;
  }
  
  .search-icon {
    margin-right: 8px;
  }
  
  input {
    flex: 1;
    background-color: transparent;
    border: none;
    font-size: 14px;
  }
  
  .category-content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  
  .left-nav {
    width: 25%;
    background-color: #fff;
    overflow-y: auto;
  }
  
  .nav-item {
    padding: 20px 10px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .nav-item.active {
    color: #3d9a0b;
    background-color: #f8f8f8;
    position: relative;
  }
  
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: #3d9a0b;
  }
  
  .right-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
  }
  
  .category-banner {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .category-banner image {
    width: 100%;
    height: 120px;
  }
  
  .subcategories {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
  }
  
  .subcategory-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }
  
  .subcategory-item image {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
  }
  
  .subcategory-item text {
    font-size: 12px;
    color: #333;
  }
</style>